<template>
    <div class="options-panel">

        <div v-show="currentPanel == 'property'">
            <div class="panel-from">

                <div class="panel-form-item">
                    <div class="item-label">表单布局</div>
                    <div class="item-input">
                        <a-radio-group v-model:value="selectItem.componentProps.formLayout">
                            <a-radio-button value="horizontal">水平</a-radio-button>
                            <a-radio-button value="vertical">垂直</a-radio-button>
                        </a-radio-group>
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">显示按钮</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.button.showButton" @change="showButtonChange"/>
                    </div>
                </div>

                <template v-if="selectItem.componentProps.button.showButton">

                    <div class="panel-inner-box">

                        <div class="panel-form-item check">
                            <div class="item-label">提交按钮</div>
                            <div class="item-input">
                                <a-switch size="small"
                                    v-model:checked="selectItem.componentProps.button.submitButton" />
                            </div>
                        </div>
                        <div class="panel-form-item" v-if="selectItem.componentProps.button.submitButton">
                            <div class="item-label">按钮文字</div>
                            <div class="item-input">
                                <a-input placeholder="提交按钮文字"
                                    v-model:value="selectItem.componentProps.button.submitButtonText" />
                            </div>
                        </div>

                        <div class="panel-form-item check">
                            <div class="item-label">重置按钮</div>
                            <div class="item-input">
                                <a-switch size="small" v-model:checked="selectItem.componentProps.button.resetButton" />
                            </div>
                        </div>
                        <div class="panel-form-item" v-if="selectItem.componentProps.button.resetButton">
                            <div class="item-label">按钮文字</div>
                            <div class="item-input">
                                <a-input placeholder="重置按钮文字"
                                    v-model:value="selectItem.componentProps.button.resetButtonText" />
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">按钮位置</div>
                            <div class="item-input">
                                <a-radio-group v-model:value="selectItem.componentProps.button.buttonPlace">
                                    <a-radio-button value="bottom">底部</a-radio-button>
                                    <a-radio-button value="top">顶部</a-radio-button>
                                </a-radio-group>
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">按钮对齐</div>
                            <div class="item-input">
                                <a-select v-model:value="selectItem.componentProps.button.buttonAlign" placeholder="请选择"
                                    style="width:100%">
                                    <a-select-option value="left">居左</a-select-option>
                                    <a-select-option value="center">居中</a-select-option>
                                    <a-select-option value="right">居右</a-select-option>
                                </a-select>
                            </div>
                        </div>
                    </div>

                </template>

                <div class="panel-form-item check">
                    <div class="item-label">有边框</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.bordered" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

            </div>
        </div>

        <div v-show="currentPanel == 'style'">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    currentPanel: {
        type: String,
        default: "property"
    },
    selectItem: {
        type: Object,
    }
})

const showButtonChange = (value) => {
    if(value){
        props.selectItem.componentProps.button.submitButton = value;
        props.selectItem.componentProps.button.resetButton = value;
    }
}



</script>
<style scoped>

</style>

